<template>
  <div class="container">
    <el-row class="tipBar">
      <el-col class="tip" :span="24">
        <el-button
          class="commonBut saveBtn funComBut fr"
          @click="editFlag = true"
          style="margin-top: 8px; margin-right: 20px"
          v-if="editFlag === false"
          >编辑权限</el-button
        >
        <i class="icon iconfont iconfanhui1" @click="goBack"></i>
        {{ title }}
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-tree
        :data="treeData"
        show-checkbox
        default-expand-all
        node-key="level"
        ref="tree"
        :default-checked-keys="[2, 3]"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
      <el-row v-if="editFlag === true">
        <el-button
          type="primary"
          @click.native="savePermission"
          class="commonBut saveBtn"
          >保存</el-button
        >
        <el-button @click.native="cancelEdit" class="commonBut cancelBtn"
          >取消</el-button
        >
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'permissionManagerDetail',
  components: {},
  data() {
    return {
      treeData: [
        {
          label: '非建领域',
          parentId: '',
          level: 1,
          children: [
            {
              label: '工资代发',
              parentId: 'ff8080817099df5b01709b395b0e001c',
              level: 2,
              children: [
                {
                  label: '工资代发列表',
                  parentId: 'ff808081709b55a901709b810ff60012',
                  level: 3,
                  children: [
                    {
                      label: '查询',
                      parentId: 'ff80808170e76c2b0170f1a098890000',
                      level: 4,
                      children: [],
                    },
                    {
                      label: '添加',
                      parentId: 'ff80808170e76c2b0170f1a098890000',
                      level: 4,
                      children: [],
                    },
                  ],
                },
                {
                  label: '银行代发',
                  parentId: 'ff808081709b55a901709b810ff60012',
                  level: 3,
                  children: [],
                },
              ],
            },
            {
              label: '企业管理',
              parentId: 'ff8080817099df5b01709b395b0e001c',
              level: 2,
              children: [
                {
                  label: '项目列表',
                  parentId: 'ff80808170e76c2b0170f1a3bd260002',
                  level: 3,
                  children: [],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      option: 0,
      roleId: '',
      permissionId: '',
      title: '角色应用',
      editFlag: false,
      formData: {
        id: '',
        name: '',
        introduction: '',
      },
      dataOrigin: [],
      hackReset: true,
      checkAll: [],
      checkAllOrigin: [],
      isIndeterminate: [],
      isIndeterminateOrigin: [],
      checkedPermissions: [],
      checkedPermissionsOrigin: [],

      checkAllModule: [],
      checkAllModuleOrigin: [],
      isIndeterminateModule: [],
      isIndeterminateModuleOrigin: [],
    }
  },
  created() {
    if (Object.keys(this.$route.query).length > 0) {
      var { option, roleId, permissionId, name, introduction } =
        this.$route.query
      this.option = option
      this.permissionId = permissionId
      this.formData.id = roleId
      this.formData.name = name
      this.formData.introduction = introduction
    }
  },
  mounted() {},
  methods: {
    goBack() {
      var { id, name, introduction } = this.formData
      this.$router.push({
        path: '/home/baseSettings/roleManagerDetail',
        name: 'roleManagerDetail',
        query: {
          option: this.option,
          roleId: id,
          name: name,
          introduction: introduction,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/roleManager',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    savePermission() {
      this.editFlag = false
      this.$message({
        message: '保存成功',
        type: 'success',
      })
    },
    cancelEdit() {
      this.editFlag = false
      this.data = JSON.parse(this.dataOrigin)
      this.checkedPermissions = JSON.parse(this.checkedPermissionsOrigin)
      this.isIndeterminate = JSON.parse(this.isIndeterminateOrigin)
      this.checkAll = JSON.parse(this.checkAllOrigin)
    },
    handleCheckAllChangeModule(val, item, index) {
      item.children.forEach((item1, index1) => {
        this.handleCheckAllChange(val, item1, index, index1)
        this.checkAll[index][index1] = val
      })
      this.isIndeterminateModule[index] = false
    },
    handleCheckAllChange(val, item1, index, index1) {
      var permissionOptions = []
      item1.children.forEach((item2) => {
        permissionOptions.push(item2.id)
      })
      this.checkedPermissions[index][index1] = val ? permissionOptions : []
      this.isIndeterminate[index][index1] = false
    },
    handleCheckedPermissionsChange(value, item1, index, index1) {
      var checkedCount = value.length
      this.$set(
        this.checkAll[index],
        index1,
        checkedCount === item1.children.length
      )
      this.$set(
        this.isIndeterminate[index],
        index1,
        checkedCount > 0 && checkedCount < item1.children.length
      )
    },
  },
}
</script>

<style scoped lang="less">
.tipBar {
  position: relative;
  z-index: 1;
  height: 54px;
  background-color: #fff;
  font: bold 18px/54px Microsoft YaHei;
  padding: 0 24px;
  .tip {
    line-height: 54px;
    font-weight: bold;
    border-bottom: 1px solid #e3e7e9;
  }
}
.operation {
  padding: 8px 12px 8px 12px;
  border-radius: 5px;
  background: rgb(0, 174, 255);
  color: white;
  font: 14px SourceHanSansCN-Medium;
  cursor: pointer;
}
.mainCon {
  padding: 50px 80px;
  top: 198px;
  .module {
    margin-bottom: 40px;
    .moduleName {
      margin-top: -4px;
      color: #333;
      font: bold 16px/27px SourceHanSansCN-Normal;
    }
    .detailBox {
      .detailBoxtitle {
        margin-top: 15px;
        color: #666;
        font: 16px/27px SourceHanSansCN-Normal;
      }
      .checkboxGroup {
        // margin-right: -20%;
        font: 14px/27px SourceHanSansCN-Normal;
      }
    }
    .dividerBox {
      height: 10px;
      margin-top: -24px;
    }
  }
}
</style>
